<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->

		<!-- 表单验证start -->
		<script src="../../libs/js/form/validationRule.js" type="text/javascript"></script>
		<script src="../../libs/js/form/validation.js" type="text/javascript"></script>
		<!-- 表单验证end -->

		<!-- 日期控件start -->
		<script type="text/javascript" src="../../libs/js/form/datePicker/WdatePicker.js"></script>
		<!-- 日期控件end -->
	</head>
	<style>
		.detailFormTable {
			border: 0;
		}
		
		.detailFormTable td {
			border: 0;
			height: 32px;
		}
	</style>

	<body>
		<div class="page_content">
			
			<span class="big_title">第一种类型</span>

			<div class="groupTitle"><span>1、箭头方向向上</span></div>

			<span title="不超过5字"  class="qTip">小尺寸提示</span>
			<div class="height_10"></div>
			<span title="图片过大会撑坏网页结构。"  class="qTip">中尺寸提示</span>
			<div class="height_10"></div>
			<span  class="qTip" title="图片过大会撑坏网页结构。对于大图可以强制设置width（不要设置height），这样可以对大图片等比例缩小。图片过大会撑坏网页结构。对于大图可以强制设置width（不要设置height），这样可以对大图片等比例缩小。">大尺寸提示</span><br />
			<div class="height_10"></div>
			<span  class="qTip" title="图片过大<br/>会<span style='color:red;'>撑坏</span>网页结构。">提示信息含html元素</span>

			<div class="height_15"></div>

			<div class="groupTitle"><span>2、箭头方向向左</span></div>

			<span title="不超过5字"  class="qTip2">小尺寸提示</span>
			<div class="height_10"></div>
			<span title="图片过大会撑坏网页结构。"  class="qTip2">中尺寸提示</span>
			<div class="height_10"></div>
			<span  class="qTip2" title="图片过大会撑坏网页结构。对于大图可以强制设置width（不要设置height），这样可以对大图片等比例缩小。图片过大会撑坏网页结构。对于大图可以强制设置width（不要设置height），这样可以对大图片等比例缩小。">大尺寸提示</span><br />
			<div class="height_10"></div>
			<span  class="qTip2" title="图片过大<br/>会<span style='color:red;'>撑坏</span>网页结构。">提示信息含html元素</span>

			<div class="height_15"></div>

			<div class="groupTitle"><span>3、点击打开</span></div>

			<input type="button" value="打开提示" id="qTip3" onclick="showTip('qTip3')" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>4、自定义提示框位置</span></div>

			<div id="userInfo" style="padding-left:400px;">用户名：admin</div>
			<br/>
			<input type="button" value="打开提示" onclick="showTip2()" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>5、自定义小箭头</span></div>

			<div id="userInfo2" style="padding-left:600px;">用户名：admin</div>
			<img src="../../libs/images/demo/demo1.jpg" id="picDemo" /><br/>
			<img src="../../libs/images/demo/demo1.jpg" id="picDemo2" />
			<br/><br/><br/><br/>
			<input type="button" value="箭头偏右" onclick="showTip3(0)" />
			<input type="button" value="箭头偏下" onclick="showTip3(1)" />
			<input type="button" value="无箭头" onclick="showTip3(2)" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>6、外部触发关闭</span></div>

			<div id="userInfo3" style="padding-left:400px;">用户名：admin</div>
			<br/>
			<input type="button" value="打开提示" onclick="showTip4()" />
			<input type="button" value="关闭提示" onclick="closeTip4()" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>7、弹出复杂内容</span></div>

			<button type="button" onclick="showTip5()" id="searchBtn">点击查询</button>
			<div class="height_30"></div>

			<div class="groupTitle"><span>8、关闭事件</span></div>

			<button type="button" onclick="showTip6()" id="closeEventDemo">点击弹出</button>

			<div class="height_30"></div>

			<div class="groupTitle"><span>9、非动态生成</span></div>

			如果只需要使用提示的样式，而不需要动态创建或者关闭，可以使用html代码。
			<div class="staticTip" style="width: 400px;">温馨提示：记账完成后，您可以到账单明细中查看记录。</div>

			<div class="height_30"></div>

			
			
			
			
			<span class="big_title">第二种类型</span>

			<div class="groupTitle"><span>外部触发，跟随鼠标</span></div>

			下面的是onfocus事件触发：<br />
			<input type="text" onfocus="$.cursorMessage('注意不能输入特殊字符');" /><br /> 下面的是onchange事件触发：
			<br />
			<script>
				function selFunc() {
					$.cursorMessage("选择了：" + $("#sel").attr("relText"));
				}
			</script>
			<select onchange='selFunc()' id="sel">
				<option value="">请选择功能</option>
				<option value="1">新增图片</option>
				<option value="2">维护图片</option>
				<option value="3">新增新闻</option>
			</select><br /> 下面的是onkeydown事件触发：
			<br />
			<textarea onkeydown="$.cursorMessage('填写详细有助于我们更好地服务');"></textarea>

			<div class="height_30"></div>


	</div>

		<script>
		
			$(function() {
				$(".qTip").tip();
				$(".qTip2").tip({
					auto: true,
					arrowDirection: "left"
				});
			});

			function showTip(objId) {
				$("#" + objId).tip({
					showCloseBtn: true,
					content: "图片过大会撑坏网页结构。对于大图可以强制设置width（不要设置height）"
				});
			}

			function showTip2() {
				$("#userInfo").tip({
					showCloseBtn: true,
					content: "您还未设置昵称，<span class='red'><a>立即设置</a></span>。",
					distanceX: 400
				});
			}

			function showTip3(idx) {
				if(idx == 0) {
					$("#userInfo2").tip({
						showCloseBtn: true,
						content: "您还未设置昵称，<span class='red'><a>立即设置</a></span>。",
						distanceX: 480,
						arrowDistanceX: 200
					});
				} else if(idx == 1) {
					$("#picDemo").tip({
						showCloseBtn: true,
						arrowDirection: "left",
						arrowDistanceY: 150,
						content: "图片过大会撑坏网页结构。对于大图可以强制设置width（不要设置height），这样可以对大图片等比例缩小。图片过大会撑坏网页结构。对于大图可以强制设置width（不要设置height），这样可以对大图片等比例缩小。"
					});
				} else if(idx == 2) {
					$("#picDemo2").tip({
						showCloseBtn: true,
						height: 45,
						showArrow: false,
						width: 400,
						content: "温馨提示：记账完成后，您可以到账单明细中查看记录。"
					});
				}
			}
			var myTip1;

			function showTip4() {
				$("#userInfo3").tip({
					content: "您还未设置昵称，<span class='red'><a>立即设置</a></span>。",
					distanceX: 400
				});
			}

			function closeTip4() {
				$("#userInfo3").hideTip();
			}
			var userEducationData = {
				"list": [{
					"value": "专科",
					"key": "专科"
				}, {
					"value": "本科",
					"key": "本科"
				}, {
					"value": "硕士",
					"key": "硕士"
				}, {
					"value": "博士",
					"key": "博士"
				}]
			};

			function showTip5() {
				$("#searchBtn").tip({
					content: "",
					showCloseBtn: true,
					width: 400,
					height: 160
				});
				var tipId = $("#searchBtn").attr("tipId");
				var formContent = $("#" + tipId).find(".qui-tip-con");
				if(formContent.find("form").length == 0) {
					var $table = $('<form id="form1" method="post" showOnMouseOver="false">' +
						'<table class="detailFormTable" style="width:100%">' +
						'<tr><td width="80" class="ali03">姓名：</td><td><input type="text" id="inputa1" class="validate[required] float_left"/><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div></td></tr>' +
						'<tr><td class="ali03">学历：</td><td><select id="inputa2" class="validate[required] float_left" prompt="请选择" ></select><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div></td></tr>	' +
						'<tr><td class="ali03">入职时间：</td><td><input type="text" id="inputa3" class="date validate[required] float_left"/><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div></td></tr>	' +
						'<tr><td colspan="2" class="ali01"><div style="padding-left:100px;"><input type="button" value="查询" id="inputa4" onclick=validateForm("#form1")>&nbsp;<input type="button" value="取消" id="inputa5" onclick="cancelSearch()"/></div></td></tr>' +
						'</table></form>')

					$("#" + tipId).find(".qui-tip-con").append($table);
					$table.find("#inputa1").render();
					$table.find("#inputa2").data("data", userEducationData);
					$table.find("#inputa2").render();
					$table.find("#inputa3").render();
					$table.find("#inputa4").render();
					$table.find("#inputa5").render();

					$table.validationEngine({
						showOnMouseOver: false
					});
				}
			}

			function cancelSearch() {
				$("#searchBtn").hideTip();
			}

			function validateForm(containerId) {
				var valid = $(containerId).validationEngine({
					returnIsValid: true,
					showOnMouseOver: false
				});
				if(valid == true) {
					top.Toast("showNoticeToast", '进行提交处理，完成后刷新数据。', function() {
						$("#searchBtn").hideTip();
					});
				} else {
					//top.Toast("showNoticeToast", '表单填写不正确，请按要求填写！');
				}
			}

			function showTip6() {
				$("#closeEventDemo").tip({
					content: "您还未设置昵称，<span class='red'><a>立即设置</a></span>。",
					showCloseBtn: true,
					onClose: function() {
						top.Toast("showNoticeToast", "触发关闭事件");
					}
				});
			}
		</script>
	</body>

</html>